<!DOCTYPE html>
<html lang="en">
<head>
  <title>MyFlaskCalender - MyFlaskCalender.html</title>
  <meta charset="UTF-8">
  <meta name="Author" content="setycyas"> 
  <link rel="stylesheet" href="/static/my-calendar-price-jquery.min.css">
  <style>
    body {margin: 0; padding: 0; font-family: "Microsoft YaHei UI";}
  </style>
  <script src="/static/jquery.min.js"></script>
  <script src="/static/poster.js"></script>
  <script src="/static/my-calendar-price-jquery.js"></script>
  <script>
    // 发送保存指令的类
    var savePoster = new SimplePoster(
      'MyFlaskCalendar',
      'save',
      (respData) => {
        alert(respData['result']);
      }
    );
    
    // 发送查询指令的类
    var getMonthDataPoster = new SimplePoster(
      'MyFlaskCalendar',
      'getMonthData',
      (respData) => {
        DATA = [];
        for (day in respData){
          DATA.push({
            date: MONTH+'-'+day,
            title: respData[day]['title'],
            text: respData[day]['text']
          });
        }
        makeCalendar();
      }
    );
    
    function log (s) {
      console.log(s)
    }
  
    // 对1位数前面补0,成为2位数字符串
    function fd(n){
      n = n.toString();
      return n[1] ? n : '0' + n;
    }
    
    /* 一下MONTH,STARTDATE,ENDDATE,DATA是公有变量,设置日历用 */
    var MONTH; // 查询月份,格式为2020-02,从window.location.href获取
    MONTH = (function(){
      var href = window.location.href;
      //href = 'http://127.0.0.1:5001/page/MyFlaskCalender/MyFlaskCalender.html'
      //href+='?month=202012';
      var monthString = href.substr(href.length-6);
      if (monthString.match(/\d{6}/)) {
        return monthString.substr(0, 4)+'-'+monthString.substr(4, 2);
      }else{
        var date = new Date();
        return fd(date.getFullYear())+'-'+fd(date.getMonth()+1);
      }
    })();
    var STARTDATE = MONTH+'-01';//开始日期
    var ENDDATE = MONTH+'-31';//结束日期
    
    //使用的每日笔记记录
    var DATA;
    DATA = (function(flag){
      if (!flag) return [];
      var date = new Date();
      var result = [];
      
      for (var i = 0; i < 100; i++) {
        result.push({
          date: date.getFullYear()+'-'+fd((i%12)+1)+'-15',
          title: i * 21+'',
          text: (i+1)*(i+2)+'.01'
        });
      }
      return result;
    })(false);//这里设定为 false,则不再生成模拟数据,实战时采用
    
    /* 确定保存笔记时,上传到服务器的资料,data是日历的submit的回调函数的参数
     规定返回格式为{'day':字符串如2020-02-23,'note':笔记{},
     暂定为:title,text} */
    function save(data){
    
      var result = {day: data['startDay'], title: data['formData']['title'],
        text: data['formData']['text']};
      console.log('save:', result);
      savePoster.post(result);
      return result;
    }
    
    // 生成日历,获取查询月份结果后再用
  function makeCalendar() {
    
    // 日历设置表单字段配置
    var calendarConfig = [
      {key: 'title',name: '标题',type: 'text',placeholder: ''},
      //{key: 'note3',name: '笔记3',type: 'text',placeholder: ''},
      {key: 'text',name: '文本',type: 'textarea',placeholder: ''}
    ];

    // 日历中显示配置
    var showConfig = [
      {key: 'title',name: '题:'},
      {key: 'text',name: '文:'}
      //{key: 'note3',name: '记3:'}
    ]

    // 样式颜色配置
    var styleConfig = {
      // 头部背景色
      headerBgColor: '#098cc2',
      // 头部文字颜色
      headerTextColor: '#fff',
      // 周一至周日背景色，及文字颜色
      weekBgColor: '#098cc2',
      weekTextColor: '#fff',
      // 周末背景色，及文字颜色
      weekendBgColor: '#098cc2',
      weekendTextColor: '#fff',
      // 有效日期颜色
      validDateTextColor: '#333',
      validDateBgColor: '#fff',
      validDateBorderColor: '#eee',
      // Hover
      validDateHoverBgColor: '#098cc2',
      validDateHoverTextColor: '#fff',
      // 无效日期颜色
      invalidDateTextColor: '#ccc',
      invalidDateBgColor: '#fff',
      invalidDateBorderColor: '#eee',
      // 底部背景颜色
      footerBgColor: '#fff',
      // 重置按钮颜色
      resetBtnBgColor: '#77c351',
      resetBtnTextColor: '#fff',
      resetBtnHoverBgColor: '#55b526',
      resetBtnHoverTextColor: '#fff',
      // 确定按钮
      confirmBtnBgColor: '#098cc2',
      confirmBtnTextColor: '#fff',
      confirmBtnHoverBgColor: '#00649a',
      confirmBtnHoverTextColor: '#fff',
      // 取消按钮
      cancelBtnBgColor: '#fff',
      cancelBtnBorderColor: '#bbb',
      cancelBtnTextColor: '#999',
      cancelBtnHoverBgColor: '#fff',
      cancelBtnHoverBorderColor: '#bbb',
      cancelBtnHoverTextColor: '#666'
    }

    //!!执行calendar,假定为today的是每月的开始日
    //console.log(STARTDATE.replace(/-/g, '/'));
    jqCalanederFun(jQuery, STARTDATE.replace(/-/g, '/'));
    
    // 初始化日历
    var zxCalendar = $.CalendarPrice({
      el: '.container',
      startDate: STARTDATE,
      endDate: ENDDATE,
      data: DATA,
      // 配置需要设置的字段名称
      config: calendarConfig,
      // 配置在日历中要显示的字段
      show: showConfig,
      // 自定义颜色
      style: styleConfig
    });

    log(zxCalendar)

    // 监听设置表单提交
    // 将阻止默认流程执行
    // 继续执行默认流程，请执行参数next()
    zxCalendar.$on('submit-form', function (data, next) {
      // data 设置的数据
      console.log('$(submit-form)表单数据 ================')
      //console.log(data)
      // 自己插入回调函数
      save(data);

      // 此处可以验证表单
      // 验证表单逻辑....
      // ....

      // 继续执行下一步
      next()
    })

    // 执行过程中错误回调
    zxCalendar.$on('error', function (err) {
      // 执行中的错误提示
      console.error('$on(error)Error:')
      console.log(err)
      alert(err.msg);
    })

    // 点击有效的某一天通知
    zxCalendar.$on('valid-day', function (day, data, next) {
      log('$on(valid-day)当前点击的(有效)日期为: ' + day + ', 数据：');
      log(data);

      // 继续执行默认流程
      next();
    })

    // 设置数据变化
    zxCalendar.$on('setup-value-change', function (data) {
      log('$on(setup-value-change)设置窗口被修改数据....');
      log(data);
      // 取消设置
      // 这里可以触发关闭设置窗口
    })

    // 点击确定按钮回调，返回当前设置数据
    zxCalendar.$on('confirm', function (data) {
      log('$on(confirm)点击确定按钮通知！');
      log(data);
    })

    // 点击取消按钮回调
    zxCalendar.$on('cancel', function () {
      log('$on(cancel)取消设置 ....');
      // 取消设置
      // 这里可以触发关闭设置窗口
    })
    
    // 最后自定义一些css
    $('.cddsw-form-wrapper li').css({'float':'none'});
    //$('.cddsw-form-wrapper li input').css({'margin-top':'10px'});
    $('.cddsw-form-wrapper li').css({'margin-top':'10px'});
  }
  </script>
</head>
<body>

<div class="container"></div>

<script>
  getMonthDataPoster.post({'month':MONTH});

</script>

</body>
</html>